<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel" :oktext="i18n('list.saveAndGenerate','保存&生成')">
        <rx-layout>
            <div slot="center">
                <a-form-model ref="form" :model="mdl" :rules="rules" >
                    <div class="FormQrcodeConfigEdit">
                        <div>
                            <a-form-model-item :label="i18n('form.loginType','登录类型')" prop="loginType">
                                <a-radio-group v-model="mdl.loginType">
                                    <a-radio value="1">
                                        {{i18n('loginMap.needLogin','需要登录')}}
                                    </a-radio>
                                    <a-radio v-if="allowNotLogin" value="0">
                                        {{i18n('loginMap.nlogin','无需登录')}}
                                    </a-radio>
                                </a-radio-group>
                            </a-form-model-item>
                            <a-form-model-item :label="i18n('form.expireType','过期类型')" prop="expireType">
                                <a-radio-group v-model="mdl.expireType" @change="expireChange(mdl.expireType,true)">
                                    <a-radio value="0">
                                        {{i18n('expireMap.neverExpire','永不过期')}}
                                    </a-radio>
                                    <a-radio value="1">
                                        {{i18n('expireMap.expirTime','设置过期时间')}}
                                    </a-radio>
                                    <a-radio value="2">
                                        {{i18n('expireMap.timePeriod','时间段(开始~结束)')}}
                                    </a-radio>
                                </a-radio-group>
                            </a-form-model-item>
                            <a-form-model-item v-show="mdl.expireType=='2'" :label="i18n('form.startTime','开始时间')" prop="startTime">
                                <a-date-picker
                                    v-model="mdl.startTime"
                                    :disabled-date="disabledStartDate"
                                    :placeholder="i18n('form.startTime','请输入开始时间','input')"
                                    show-time
                                    :format="format"/>
                            </a-form-model-item>
                            <a-form-model-item v-show="mdl.expireType!='0'" :label="i18n('form.endTime','结束时间')" prop="endTime">
                                <a-date-picker
                                    v-model="mdl.endTime"
                                    :disabled-date="disabledEndDate"
                                    :placeholder="i18n('form.endTime','请输入结束时间','input')"
                                    show-time
                                    :format="format"/>
                            </a-form-model-item>
                            <a-textarea
                                v-show="pkId"
                                v-model="mdl.qrcodeUrl"
                                :placeholder="i18n('form.qrcodePath','请输入二维码路径','input')"
                                :auto-size="{ minRows: 5, maxRows: 8 }"
                            />
                            <a-button class="FormQrcodeConfigEdit-button" v-show="pkId" @click="createQrCode" type="primary">{{i18n('list.rxQrcode','生成二维码')}}</a-button>
                        </div>
                        <div>
                            <div class="FormQrcodeConfigEdit-qr">
                                <div id="capture" class="FormQrcodeConfigEdit-QRCode">
                                    <div v-if="mdl.qrcodeUrl || pkId" class="qrcode" id="in-qrCode" ref="QRCode"></div>
                                    <div class="FormQrcodeConfigEdit-QRCode-empty" v-else>
                                        <my-icon type="iconqrcode1"></my-icon>
                                        <span>
                                            {{i18n('msg.genCode','此处生成二维码')}}
                                        </span>
                                    </div>
                                </div>
                                <a-button class="FormQrcodeConfigEdit-QRCode-button" @click="myCanvasQrCode" type="primary">
                                    {{i18n('msg.downloadQr','下载二维码')}}
                                </a-button>
                            </div>
                        </div>
                    </div>
                </a-form-model>
            </div>
        </rx-layout>
    </rx-dialog>
</template>
<script>
import FormQrcodeConfigApi from '@/api/form/core/formQrcodeConfig'
import {RxDialog, BaseFormModel} from "@lowcode/jpaas-common-lib";
import moment from 'moment';

export default {
    name: 'FormQrcodeConfigEdit',
    mixins: [BaseFormModel],
    components: {
        RxDialog,
    },
    props:{
        alias:{
            type:String,
            default:""
        },
        allowNotLogin:{
            type:Boolean,
            default:true
        }
    },
    data() {
        return {
            mdl:{
                loginType:"1",
                expireType:"0",
                formAlias:this.alias,
                startTime:"",
                endTime:"",
                qrcodeUrl:"",
            },
            subTable: {},
            rules: {
                formAlias: [{required: false, message: this.i18n('form.formSolutionAlias',"请输入表单方案别名",'input'), trigger: 'change'}],
                loginType: [{required: true, message: this.i18n('form.loginType',"请输入登录类型",'input'), trigger: 'change'}],
                expireType: [{required: true, message: this.i18n('form.expireType',"请输入过期类型",'input'), trigger: 'change'}],
                startTime: [{required: false, message: this.i18n('form.startTime',"请输入开始时间",'input'), trigger: 'change'}],
                endTime: [{required: false, message: this.i18n('form.endTime',"请输入结束时间",'input'), trigger: 'change'}],
                qrcodeUrl: [{required: false, message: this.i18n('form.qrcodePath',"请输入二维码路径",'input'), trigger: 'change'}],
            },
            format:"YYYY-MM-DD HH:mm",
            serverAddress:"",
        }

    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"formQrcode",key);
        },
        onload_(values){
            if(values){
                this.createQrCode();
            }
            this.expireChange(this.mdl.expireType,false);
        },
        get(id) {
            return FormQrcodeConfigApi.get(id);
        },
        validForm(){
            if(this.mdl.expireType=="2" &&  this.mdl.startTime){
                const diff = moment(this.mdl.endTime).diff(moment(this.mdl.startTime), 'minutes' );
                if(diff<=0){
                    this.$message.warning(this.i18n('msg.validForm','开始时间不能大于等于结束时间！'));
                    return false;
                }
            }
            return true;
        },
        save() {
            //永不过期
            if(this.mdl.expireType=="0"){
                this.mdl.startTime="";
                this.mdl.endTime="";
            } else if(this.mdl.expireType=="1"){
                this.mdl.startTime="";
                if(this.mdl.endTime){
                    this.mdl.endTime=moment(this.mdl.endTime).format(this.format);
                }
            }else {
                if(this.mdl.startTime){
                    this.mdl.startTime=moment(this.mdl.startTime).format(this.format);
                }
                if(this.mdl.endTime){
                    this.mdl.endTime=moment(this.mdl.endTime).format(this.format);
                }
            }
            return FormQrcodeConfigApi.saveFormQrcodeConfig(this.mdl);
        },
        expireChange(value,init){
            //永不过期
            if(value=="0"){
                this.rules.startTime[0].required=false;
                this.rules.endTime[0].required=false;
            }else if(value=="1"){   //设置过期时间
                this.rules.startTime[0].required=false;
                this.rules.endTime[0].required=true;
            }else if(value=="2"){   //时间段(开始~结束)
                this.rules.startTime[0].required=true;
                this.rules.endTime[0].required=true;
            }
            if(init){
                this.mdl.startTime ="";
                this.mdl.endTime ="";
            }
        },
        createQrCode(){
            var self=this;
            setTimeout(()=>{
                self.$refs.QRCode.innerHTML = "";
                var qrcode = new QRCode(self.$refs.QRCode, {
                    text: self.mdl.qrcodeUrl, // 需要转换为二维码的内容
                    width: 233,
                    height: 235,
                    colorDark: '#000000',
                    colorLight: '#ffffff',
                    correctLevel: QRCode.CorrectLevel.H
                })
            },200);
        },
        myCanvasQrCode(){
            let self=this;
            html2canvas(document.getElementById("in-qrCode"), {
                backgroundColor: '#ececec', //画布背景色（如果未在DOM中指定）。设置null为透明
                allowTaint: true,
                useCORS: true,
                scale: 2, // 处理模糊问题
                dpi: 350, // 处理模糊问题
                height: 265,
                windowHeight: 265,
            }).then((canvas) => {
                let canvasImg = canvas.toDataURL("image/png", 1);
                //调用下载方法
                self.downLoadFile('code'+ Date.now(), canvasImg);
            });
        },
        downLoadFile(fileName, canvasImg) {
            //创建一个a标签
            let a = document.createElement("a");
            //指定下载文件名称
            a.href = canvasImg;
            a.download = fileName;
            //模拟点击
            a.click();
        },
        disabledStartDate(startValue) {
            if(this.mdl.expireType!='2'){
                return false;
            }
            const endValue = this.getDateTime(this.mdl.endTime);
            if (!startValue || !endValue) {
                return false;
            }
            return startValue.valueOf() > endValue.valueOf();
        },
        disabledEndDate(endValue) {
            if(this.mdl.expireType!='2'){
                return false;
            }
            const startValue = this.getDateTime(this.mdl.startTime);
            if (!endValue || !startValue) {
                return false;
            }
            return startValue.valueOf() >= endValue.valueOf();
        },
        getDateTime(value){
            if (typeof value == 'number') {
                return value;
            }
            return moment(value);
        }
    },
}
</script>
<style scoped>
.FormQrcodeConfigEdit-QRCode-empty{
    width: 271px;
    height: 271px;
    background-color: #ffffff;
    border-radius: 6px;
    border: solid 8px #0e62e8;
    display: flex;
    flex-direction: column;
}
.FormQrcodeConfigEdit-QRCode-empty i{
    font-size: 140px;
    margin-top: 30px;
}
.FormQrcodeConfigEdit-QRCode-empty span{
    display: block;
    text-align: center;
    font-size: 16px;
    color: #cccccc;
    margin-top: 10px;
}
.qrcode{
    border:15px solid white;
}
.FormQrcodeConfigEdit-qr{
    width: 388px;
    height: 480px;
    margin-left: 42px;
    border-radius: 6px;
    background-image:url('../../../../image/qr.png');
    box-sizing: border-box;
    padding-top: 60px;
}
.FormQrcodeConfigEdit-QRCode-log{
    position: absolute;
    top:calc(50% - 25px);
    left:calc(50% - 25px);
    width: 50px;
    height: 50px;
    z-index: 1;
    border-radius: 3px;
}
.FormQrcodeConfigEdit-QRCode{
    height: 279px;
    width: 277px;
    margin:auto;
    border: 7px solid rgba(14,98,232);
    border-radius: 6px;
    position: relative;
}
.FormQrcodeConfigEdit-QRCode-button{
    width: 210px;
    height: 44px;
    background-color: #0e62e8;
    border-radius: 4px;
    margin-left: 92px;
    margin-top: 40px;
    border: none;
}
.FormQrcodeConfigEdit{
    display: flex!important;
    width: 100%;
    margin-top: 23px;
}
.FormQrcodeConfigEdit >div:nth-child(1){
    flex: 1;
    margin-left: 64px;
}
.FormQrcodeConfigEdit >div:nth-child(2){
    width: 466px;
}
.FormQrcodeConfigEdit-button{
    width: 277px;
    margin:30px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
